<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mermaid Treemap Diagram Demo</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <style>
      body {
        font-family: 'Montserrat', sans-serif;
        margin: 0 auto;
        max-width: 900px;
        padding: 20px;
      }
      .mermaid {
        margin: 30px 0;
      }
      h1,
      h2 {
        color: #333;
      }
      pre {
        background-color: #f5f5f5;
        padding: 15px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Treemap Diagram Demo</h1>
    <p>This is a demo of the new treemap diagram type in Mermaid.</p>

    <h2>Basic Treemap Example</h2>
    <pre class="mermaid">
treemap
    "Root"
        "Branch 1"
            "Leaf 1.1": 10
            "Leaf 1.2": 15
        "Branch 2"
            "Branch 2.1"
                "Leaf 2.1.1": 20
                "Leaf 2.1.2": 25
            "Leaf 2.2": 25
            "Leaf 2.3": 30
    </pre>

    <h2>Technology Stack Treemap Example</h2>
    <pre class="mermaid">
treemap
    "Technology Stack"
        "Frontend"
            "React": 35
            "CSS": 15
            "HTML": 10
        "Backend"
            "Node.js": 25
            "Express": 10
            "MongoDB": 15
        "DevOps"
            "Docker": 10
            "Kubernetes": 15
            "CI/CD": 5
    </pre>

    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'forest',
        logLevel: 1,
        securityLevel: 'loose',
      });
    </script>
  </body>
</html>
